<template>
  <div class=''>
    <Card style="margin:20px 100px 0 100px;height:650px;dispaly:block;">
        <div style="margin-bottom:20px">
            <Row>
                <Col span="9" style="width: 39.5%;">
                   <Button type="primary" icon="ios-arrow-back" @click="cancel">返回</Button>
                </Col>
                <Col span="5" style="text-align:center;width: 20.83333333%;"><h1>Echarts 图表</h1></Col>
                <Col span="9" style="width: 39.5%;">
                    <div style="float:right">
                      <Button type="primary" icon="md-checkmark" @click="submit">确定</Button>
                    </div>
                </Col>
            </Row>
        </div>
        <div class="tubiao">
          <span><LeftTop></LeftTop></span>
          <span><RightTop></RightTop></span>
        </div>
          <div class="tubiao">
          <!-- <span><LeftBottom></LeftBottom></span>
          <span><RightBottom></RightBottom></span> -->
        </div>
    </Card>
  </div>
</template>
<script>
import LeftTop from './components/leftTop'
import RightTop from './components/rightTop'
// import LeftBottom from './components/leftbottom'
// import RightBottom from './components/rightbotom'
export default {
  name: 'MyComponent',
  components:{
    LeftTop,
    RightTop,
    // LeftBottom,
    // RightBottom,
  },
  data () {
    return {
    }
  },
  methods:{
    cancel(){
      this.$router.go(-1);
    },
    submit(){
      console.log(123);
    }
  }
}
</script>

<style scoped lang='less'>
.map{
  width: 100%;
}
.tubiao{
  display: flex;
  justify-content: space-between;
  span{
    width: 100%;
    display: inline-block;
  }
}
</style>
